<template>
  <view class="main">
    <view class="ip-item">
      <input type="text" placeholder="手机号隐藏开关" disabled placeholder-class="ip" />
      <view>
        <van-switch active-color="#0753fd" inactive-color="#eeeeee" v-model="switchBool" @change="switchChange" />
      </view>
    </view>

    <view>
      <view class="right-icon-box">
        <image src="@/static/image/add-config.png" mode="scaleToFill" class="add-config" @click="addDel(1)" />
      </view>
      <view class="dispaly-just-between" v-for="(s, k) in getRuleDatas" style="margin-bottom: 20rpx">
        <view class="ip-item" style="width: 48%">
          <view class="dispaly-just-between">
            <input type="text" placeholder="" placeholder-class="ip" style="color: #2352f4" v-model="s.number" />
            <view>条</view>
          </view>
        </view>

        <view class="ip-item" style="width: 48%;margin-left: 10rpx;">
          <view class="dispaly-just-between">
            <input type="text" placeholder="" placeholder-class="ip" style="color: #2352f4" v-model="s.price" />
            <view>元</view>
          </view>
        </view>
        <image style="margin-left: 10rpx;" src="@/static/image/config-delete.png" mode="scaleToFill" class="add-config"
          @click="addDel(2, s, k)" />
      </view>
    </view>

    <view class="btns">
      <Button @clickButton="save" :loading="loading" loading-text="保存中" text="保存" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  createCircle,
  circleInfo,
  getPhoneConfig,
  circlePhoneConfig,
  deletePhone
} from "@/api/apiList";
import { onLoad } from "@dcloudio/uni-app";
const switchBool = ref(true);
const getIds = ref("");
const getRuleDatas = ref([
  {
    id: "",
    number: 0,
    price: 0,
  },
]);
const loading = ref(false);
const getRuleInfoData = ref();

onLoad((e) => {
  if (e && e?.id) {
    getIds.value = e?.id;
    // 获取手机号是否显示
    getInfo();
    getConfigData();
  }
});

// 保存
const save = async () => {
  let errMsg = "";
  for (let i = 0; i < getRuleDatas.value.length; i++) {
    let item = getRuleDatas.value[i];
    if (!Number(item.number) || !Number(item.price)) {
      errMsg = "请补全信息";
    }
  }

  if (errMsg)
    return uni.showToast({
      title: errMsg,
      icon: "none",
    });

  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 2000);
  // 开始保存
  const { code, data, msg } = await circlePhoneConfig(getRuleDatas.value);
  console.log(123, getRuleDatas.value)
  if (code != 200)
    return uni.showToast({
      title: msg || "保存失败",
      icon: "none",
    });

  // 重新拉取数据
  getConfigData();
};

// 增加配置或者减少
const addDel = async (num, s, k) => {
  if (num == 1) {
    if (getRuleDatas.value.length > 4)
      return uni.showToast({
        title: "最多只能配置5条",
        icon: "none",
      });
    return getRuleDatas.value.push({
      id: "",
      number: 0,
      price: 0,
      circleId: getIds.value,
    });
  }
  if (num == 2) {
    if (getRuleDatas.value.length == 1) {
      return uni.showToast({
        title: "至少需要有一条",
        icon: "none",
      })
    }
     if(s.id == "") {
      getRuleDatas.value.splice(k, 1);
      return;
    }
    const { code, msg } = await deletePhone({ id: s.id });
    console.log(s.id, 'ssss')
    if (code != 200) {
      return uni.showToast({
        title: msg || "删除失败",
        icon: "none",
      });
    } else {
      uni.showToast({
        title: "删除成功",
        icon: "none",
      });
      getRuleDatas.value.splice(k, 1);
    }
    return;
  }
  console.log(num, s, k);
  // if (getRuleDatas.value.length == 1)
  //   return uni.showToast({
  //     title: "至少需要有一条",
  //     icon: "none",
  //   });
  // getRuleDatas.value.slice((getRuleDatas.value.length = 1), 1);
};
// 获取圈子信息
const getInfo = async () => {
  const { code, data } = await circleInfo({ id: getIds.value });
  if (code == 200) {
    switchBool.value = data?.isShow == 0 ? false : true;
  }
};
// 获取配置信息
const getConfigData = async () => {
  getRuleDatas.value = [];
  getRuleDatas.value.push({
    id: "",
    number: 0,
    price: 0,
    circleId: getIds.value,
  });
  const { code, rows } = await getPhoneConfig({ circleId: getIds.value });

  if (code == 200) {
    let arr = [];
    if (rows.length > 0) {
      rows.forEach((item) => {
        arr.push({
          id: item.id,
          number: item.number,
          price: item.price,
          circleId: getIds.value,
        });
      });

      getRuleDatas.value = arr;
    }
  }
};
const switchChange = async (e) => {
  const response = await createCircle({
    isShow: e == true ? 1 : 0,
    id: getIds.value,
  });
  if (response.code != 200) {
    switchBool.value = e ? false : true;
    return uni.showToast({
      title: response.msg || "修改失败",
      icon: "none",
    });
  }
  uni.showToast({
    title: "修改成功",
    icon: "none",
  });

  setTimeout(() => {
    getInfo();
  }, 800);
};
</script>

<style lang="scss" scoped>
.main {
  padding: 30rpx;
}

.ip {
  color: #000;
}

.btns {
  padding: 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}

:deep .ip-item {
  margin-bottom: 0 !important;
}

.right-icon-box {
  display: flex;
  justify-content: flex-end;
  margin: 30rpx 0 20rpx 0;


}

.add-config {
  width: 60rpx;
  height: 60rpx;
  display: block;
}

.add-config:first-of-type {
  margin-right: 20rpx;
}
</style>
